<template>
<div class="">
  <div class="header"  style="padding: 1.3rem 0;">
        <div class="title ocolor"  >全方位服务</div>
  </div>
  <div class="van-tabbar" style="height:100%">
      <van-tabs @click="onClick">
        <van-tab>
            <div slot="title">
                <div class=" menu-content">
                    <div class="img"><img src="@/assets/ditAct.png" alt=""></div>
                    <div class=" menu-title">全程服务</div>
                </div>
            </div>
            <div class="content">
                <div class=" view-backgroud view-mobile">
                    <div class=" view-connect">
                        <div class=" view-title">全程服务</div>
                        <div class=" view-detail">{{infoList.wap_service_gs}}</div>
                    </div>
                </div>
            </div>
        </van-tab>
        <van-tab>
            <div slot="title">
                <div class=" menu-content">
                    <div class="img"><img src="@/assets/allAct.png" alt=""></div>
                    <div class=" menu-title">保录取套餐</div>
                </div>
            </div>
            <div class="content">
                <div class=" view-backgroud view-mobile">
                    <div class=" view-connect">
                        <div class=" view-title">保录取套餐</div>
                        <div class=" view-detail">{{infoList.wap_service_full}}</div>
                    </div>
                </div>
            </div>
        </van-tab>
        <van-tab>
            <div slot="title">
                <div class=" menu-content">
                    <div class="img"><img src="@/assets/personAct.png" alt=""></div>
                    <div class=" menu-title">软实力提升</div>
                </div>
            </div>
            <div class="content">
                <div class=" view-backgroud view-mobile">
                    <div class=" view-connect">
                        <div class=" view-title">软实力提升</div>
                        <div class=" view-detail">{{infoList.wap_service_gr}}</div>
                    </div>
                </div>
            </div>
        </van-tab>
      </van-tabs>
  </div>
          <div class="counts-mask">
            <div class="counts-layout">
                <div class="item">
                    <img
                        src="~@/assets/advocacy-01.png"
                        class="item-image"
                    >
                    <div class="item-detail">
                        <div class="item-number">98<span class="unit">%</span></div>
                        <div class="item-intro ocolor">成功收获录取通知书</div>
                    </div>
                </div>
                <div class="item">
                    <img
                        src="~@/assets/advocacy-02.png"
                        class="item-image"
                    >
                    <div class="item-detail">
                        <div class="item-number">80<span class="unit">%</span></div>
                        <div class="item-intro ocolor">选择保录取套餐</div>
                    </div>
                </div>
                <div class="item">
                    <img
                        src="~@/assets/advocacy-03.png"
                        class="item-image"
                    >
                    <div class="item-detail">
                        <div class="item-number">97<span class="unit">%</span></div>
                        <div class="item-intro ocolor">顺利出国留学</div>
                    </div>
                </div>
            </div>
        </div>
        
</div>
</template>

<script>
export default {
  name: 'AllRoundService',

  methods:{
    onClick() {

    },
  }
}
</script>

<style lang="less">
.container{
      .counts-mask {
    background: #f4f4f4;
    padding: 1.15rem 1.2rem;
    .counts-layout {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .counts-layout .item {
        text-align: center;
        position: relative;
      }
      .item {
          text-align: center;
        img {
          width: 2.2rem;
          height: 2.2rem;
          vertical-align: middle;
        }
        .item-detail .item-number {
          color: #2a4254;
          font-weight: bold;
          font-size: 1.8rem;
          line-height: 1.8rem;
          margin: 0.55rem 0;
        }
        .unit {
          font-size: 0.75rem;
          line-height: 0.75rem;
        }
        .item-intro {
          color: #00a4ff;
          font-size: 0.5rem;
          line-height: 0.5rem;
        }
      }
    }
  }
  .header{

         .title{
        color: rgb(0, 164, 255);
        font-size: 0.9rem;
        line-height: 0.9rem;
        font-weight: bold;
        text-align: center;
    }
  }
 .menu-content{
        color: #737474;
        font-size: 0.6rem;
        text-align: center;
        .img{
          width: 0.9rem;
          height: 0.9rem;
          margin: 0 auto;
      }
      .menu-title{
            color: #2a4154;
            padding: 0.45rem 0;
      }
      }
     .van-tabs__line{
         background-color:#dfa950 !important;
     }
  .content{
      .view-mobile {
            margin: 0 0.75rem;
            height: 10rem;
            width: 18.5rem;
        }
        .view-backgroud {
            display: block;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('~@/assets/ditBg_app.png');
        }
        .view-connect {
            color: white;
            display: block;
            padding-top: 2.2125rem;
            padding-left: 1.75rem;
        }
        .view-title {
            font-size: 0.9rem;
            line-height: 0.9rem;
            padding-left: 1rem;
        }
        .view-detail {
            margin-top: 0.575rem;
            font-size: 0.6rem;
            width: 13.125rem;
        }
  }
}
.menu-content{
    height: 2.5rem;
}
.van-tab__text--ellipsis {
    width: 100%;
}
.item img {
    width: 2.2rem!important;
    height: 2.2rem!important;
    margin:  0 auto;
}
.dit-button{
    width: 13.25rem!important;
    padding: 0.8rem 1.6rem!important;
    box-shadow: 0 10px 20px -10px rgba(224, 173, 90, 0.8)!important;
    background-image: linear-gradient(180deg, #e0ad5a 0%, #dfa039 100%), linear-gradient(#00a4ff, #00a4ff)!important;
}
</style>
